<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>案例_天气预报</title>
  </head>

  <body>
    <div class="container">
      <!-- 顶部 -->
      <div class="top-box">
        <div class="title">
          <span class="dateShort">10月28日</span>
          <span class="calendar"
            >农历&nbsp;
            <span class="dateLunar">十月初四</span>
          </span>
        </div>
        <div class="search-box">
          <div class="location">
            <img src="./imgs/定位.png" alt="" />
            <span class="area">城市名</span>
          </div>
          <!-- 搜索框+搜索列表 -->
          <div class="search">
            <input type="text" class="search-city" placeholder="搜索城市" />
            <ul class="search-list">
            </ul>
          </div>
        </div>
      </div>
      <!-- 当前天气 -->
      <div class="weather-box">
        <div class="tem-box">
          <span class="temp">
            <span class="temperature">12</span>
            <span>°</span>
          </span>
        </div>
        <div class="climate-box">
          <div class="air">
            <span class="psPm25">55</span>
            <span class="psPm25Level">良</span>
          </div>
          <ul class="weather-list">
            <li>
              <img src="./imgs/小雨-line.png" class="weatherImg" alt="" />
              <span class="weather">多云</span>
            </li>
            <li class="windDirection">东南风</li>
            <li class="windPower">2级</li>
          </ul>
        </div>
      </div>
      <div class="today-weather">
        <div class="range-box">
          <span>今天：</span>
          <span class="range">
            <span class="weather">晴</span>
            <span class="temNight">9</span>
            <span>-</span>
            <span class="temDay">14</span>
            <span>℃</span>
          </span>
        </div>
        <ul class="sun-list">
          <li>
            <span>紫外线</span>
            <span class="ultraviolet">强</span>
          </li>
          <li>
            <span>湿度</span>
            <span class="humidity">53</span>%
          </li>
          <li>
            <span>日出</span>
            <span class="sunriseTime">06:38</span>
          </li>
          <li>
            <span>日落</span>
            <span class="sunsetTime">17:18</span>
          </li>
        </ul>
      </div>
      <!-- 周天气预报 -->
      <div class="week-weather-box">
        <div class="title">7日内天气预报</div>
        <ul class="week-wrap">
          <li class="item">
            <div class="date-box">
              <span class="dateFormat">今天</span>
              <span class="date">10月28日</span>
            </div>
            <img src="./imgs/多云.png" alt="" class="weatherImg" />
            <span class="weather">多云</span>
            <div class="temp">
              <span class="temNight">12</span>-
              <span class="temDay">12</span>
              <span>℃</span>
            </div>
            <div class="wind">
              <span class="windDirection">东南风</span>
              <span class="windPower">&lt;3级</span>
            </div>
          </li>
          <li class="item">
            <div class="date-box">
              <span class="dateFormat">今天</span>
              <span class="date">10月28日</span>
            </div>
            <img src="./imgs/多云.png" alt="" class="weatherImg" />
            <span class="weather">多云</span>
            <div class="temp">
              <span class="temDay">12</span>-
              <span class="temNight">12</span>
              <span>℃</span>
            </div>
            <div class="wind">
              <span class="windDirection">东南风</span>
              <span class="windPower">&lt;3级</span>
            </div>
          </li>
          <li class="item">
            <div class="date-box">
              <span class="dateFormat">今天</span>
              <span class="date">10月28日</span>
            </div>
            <img src="./imgs/多云.png" alt="" class="weatherImg" />
            <span class="weather">多云</span>
            <div class="temp">
              <span class="temDay">12</span>-
              <span class="temNight">12</span>
              <span>℃</span>
            </div>
            <div class="wind">
              <span class="windDirection">东南风</span>
              <span class="windPower">&lt;3级</span>
            </div>
          </li>
          <li class="item">
            <div class="date-box">
              <span class="dateFormat">今天</span>
              <span class="date">10月28日</span>
            </div>
            <img src="./imgs/多云.png" alt="" class="weatherImg" />
            <span class="weather">多云</span>
            <div class="temp">
              <span class="temDay">12</span>-
              <span class="temNight">12</span>
              <span>℃</span>
            </div>
            <div class="wind">
              <span class="windDirection">东南风</span>
              <span class="windPower">&lt;3级</span>
            </div>
          </li>
          <li class="item">
            <div class="date-box">
              <span class="dateFormat">今天</span>
              <span class="date">10月28日</span>
            </div>
            <img src="./imgs/多云.png" alt="" class="weatherImg" />
            <span class="weather">多云</span>
            <div class="temp">
              <span class="temDay">12</span>-
              <span class="temNight">12</span>
              <span>℃</span>
            </div>
            <div class="wind">
              <span class="windDirection">东南风</span>
              <span class="windPower">&lt;3级</span>
            </div>
          </li>
          <li class="item">
            <div class="date-box">
              <span class="dateFormat">今天</span>
              <span class="date">10月28日</span>
            </div>
            <img src="./imgs/多云.png" alt="" class="weatherImg" />
            <span class="weather">多云</span>
            <div class="temp">
              <span class="temDay">12</span>-
              <span class="temNight">12</span>
              <span>℃</span>
            </div>
            <div class="wind">
              <span class="windDirection">东南风</span>
              <span class="windPower">&lt;3级</span>
            </div>
          </li>
          <li class="item">
            <div class="date-box">
              <span class="dateFormat">今天</span>
              <span class="date">10月28日</span>
            </div>
            <img src="./imgs/多云.png" alt="" class="weatherImg" />
            <span class="weather">多云</span>
            <div class="temp">
              <span class="temDay">12</span>-
              <span class="temNight">12</span>
              <span>℃</span>
            </div>
            <div class="wind">
              <span class="windDirection">东南风</span>
              <span class="windPower">&lt;3级</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <script src="./js/axios.min.js"></script>
    <script>
      // 控制搜索列表，显示/隐藏
      const searchList = document.querySelector(".search-list");
      const searchCity = document.querySelector(".search-city");
      let code
      let time 
      // 输入框内容改变时，有城市关键字出现列表，没有则不出现列表
      searchCity.addEventListener("input", (e) => {
        clearTimeout(time)
        time = setTimeout(async function(){
          await search(searchCity.value)
          if (e.target.value.length > 0 && searchList.innerHTML!=='') {
          searchList.classList.add("show");

        } else {
          searchList.classList.remove("show");
        }
        },500)
        
        
      });

      // 输入框失焦，隐藏搜索列表
      searchCity.addEventListener("blur", (e) => {
        // 延迟消失，保证点击获取到城市code后，再隐藏下拉列表

        setTimeout(() => {
          searchList.classList.remove("show");
        }, 500);
      });

      // 输入框聚焦，显示搜索列表
      searchCity.addEventListener("focus",(e) => {
        if (e.target.value.length > 0&& searchList.innerHTML!=='') {
          searchList.classList.add("show");
        }
      });
      searchList.addEventListener('click',function(e){
        if(e.target.tagName === 'LI'){
          searchCity.value = e.target.innerHTML
          search(searchCity.value)
          render(e.target.dataset.code)
          
        }
      });

      async function render(code) {
        const data = await axios({url:`https://hmajax.itheima.net/api/weather?city=${code || 110100}`})  
        const cityData = data.data
        // console.log(cityData);
        const keys = Object.keys(cityData.data) 
        keys.forEach(key=>{
          if (key === 'dayForecast') {
            const str = cityData.data[key].map(item=>`<li class="item">
            <div class="date-box">
              <span class="dateFormat">${item.dateFormat}</span>
              <span class="date">${item.date}</span>
            </div>
            <img src="${item.weatherImg}" alt="" class="weatherImg" />
            <span class="weather">${item.weather}</span>
            <div class="temp">
              <span class="temNight">${item.temNight}</span>-
              <span class="temDay">${item.temDay}</span>
              <span>℃</span>
            </div>
            <div class="wind">
              <span class="windDirection">${item.windDirection}</span>
              <span class="windPower">&lt;${item.windPower}</span>
            </div>
          </li>`).join('')
          document.querySelector('.week-wrap').innerHTML = str
          }else if(key === 'todayWeather'){
            const todayKeys = Object.keys(cityData.data[key]) 
            todayKeys.forEach(element=>{
              document.querySelector(`.${element}`).innerHTML = cityData.data[key][element]
            })
          }else if(key === 'weatherImg'){
            document.querySelector(`.${key}`).src = cityData.data[key]
          }else{
            document.querySelector(`.${key}`).innerHTML = cityData.data[key]

          }
        })
      } 
      render()
      async function search(city) {
        const res = await axios({url:`https://hmajax.itheima.net/api/weather/city?city=${city}`})
        const data = res.data.data
        console.log(data);
        searchList.innerHTML = data.map(item=>`<li class="city-item" data-code='${item.code}'>${item.name}</li>`).join('')
        
        
      }
      console.log(code,time);
      console.log('新增一个功能');
      
    </script>
  </body>
</html>
